<template>
  <div>
    <el-row :gutter="10">
      <el-col>
        <el-card>
          <div style="width: 100%;height: 400px " id="line"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "compare",
  data(){
   return{
      option: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      }
   }
  },
  created() {

  },
  methods:{
    init(id,option){
      let Dom = document.getElementById(id)
      let Chart = echarts.init(Dom)
      Chart.setOption(option)
    },
    getLineData(){
      this.$axios({
        url:'/api/track/previousData',
        method:'get',
        headers:{
          'Authorization':this.$cookies.get('token')
        }
      }).then(res =>{
        this.option.xAxis.data = res.data.data[0]
        this.option.series[0].data = res.data.data[1]
        this.init('line',this.option)
        // console.log(this.pieOption.series[0].data)
      })
    }
  },
  mounted() {
   this.getLineData()
  }
}
</script>

<style lang="less" scoped>
.part {
.box {
  width: 800px;
  height: 800px;
  margin-left: 40px;
}
}
</style>
